<template>
  <div>
    <el-dialog title="修改绑定信息" :visible.sync="showEditDialog" center width="770px">
      <el-form :model="storeBankData"  :rules="rules" ref="storeBankData" >

        <el-steps :active="active" finish-status="success">
          <el-step title="步骤 1"></el-step>
          <el-step title="步骤 2"></el-step>
        </el-steps>

        <template v-if="active===1">
          <el-form-item label="商家" :label-width="formLabelWidth">
            <el-select v-model="storeBankData.store_id" placeholder="请选择商家">
              <el-option
                v-for="(item,index) in storeList"
                :key="index"
                :label="item.name"
                :value="item.customer_store_id">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="机构名称" :label-width="formLabelWidth" prop="name">
            <el-input v-model="storeBankData.organization_name" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="公司名称" :label-width="formLabelWidth" prop="name">
            <el-input v-model="storeBankData.company_name" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="社会统一信用代码" :label-width="formLabelWidth" prop="name">
            <el-input v-model="storeBankData.unified_social_credit_code" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="详细地址" :label-width="formLabelWidth" prop="name">
            <el-input v-model="storeBankData.address" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="持卡人姓名" :label-width="formLabelWidth" prop="name">
            <el-input v-model="storeBankData.name_of_cardholder" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="持卡人身份证" :label-width="formLabelWidth" prop="name">
            <el-input v-model="storeBankData.id_of_cardholder" autocomplete="off"></el-input>
          </el-form-item>
        </template>


        <template v-if="active===2">
          <el-form-item label="开户名称" :label-width="formLabelWidth" prop="name">
            <el-input v-model="storeBankData.account_name" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="银行卡卡号" :label-width="formLabelWidth" prop="name">
            <el-input v-model="storeBankData.account_number" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="认证类型" :label-width="formLabelWidth">
            <el-radio v-model="storeBankData.type" :label="0">个人</el-radio>
            <el-radio v-model="storeBankData.type" :label="1">企业</el-radio>
          </el-form-item>
          <el-form-item label="打款到" :label-width="formLabelWidth">
            <el-radio v-model="storeBankData.pay_to" :label="0">个人账号</el-radio>
            <el-radio v-model="storeBankData.pay_to" :label="1">公司账号</el-radio>
          </el-form-item>

          <el-form-item label="状态" :label-width="formLabelWidth">
            <el-radio-group v-model="storeBankData.status">
              <el-radio :label="0">待审核</el-radio>
              <el-radio :label="1">成功</el-radio>
              <el-radio :label="2">失败</el-radio>
            </el-radio-group>
          </el-form-item>

  <!--        <el-form-item label="主行" :label-width="formLabelWidth">-->
  <!--          <el-input v-model="storeBankData.bank_id" autocomplete="off"></el-input>-->
  <!--        </el-form-item>-->

  <!--        <el-form-item label="支行" :label-width="formLabelWidth">-->
  <!--          <el-input v-model="storeBankData.bank_branch_id" autocomplete="off"></el-input>-->
  <!--        </el-form-item>-->

          <el-form-item label="选择主行和支行" :label-width="formLabelWidth">
            <el-select v-model="storeBankData.bank_id" filterable placeholder="选择主行">
              <el-option
                v-for="item in bankData"
                :key="item.bankid"
                :label="item.bankname"
                :value="item.bankid">
              </el-option>
            </el-select>

            <el-select v-model="storeBankData.branch_bank_id" filterable placeholder="选择分行">
              <el-option
                v-for="item in branchData"
                :key="item.number"
                :label="item.branchname"
                :value="item.number">
              </el-option>
            </el-select>

          </el-form-item>

  <!--        <el-form-item label="省份" :label-width="formLabelWidth">-->
  <!--          <el-input v-model="storeBankData.province_id" autocomplete="off"></el-input>-->
  <!--        </el-form-item>-->

  <!--        <el-form-item label="城市" :label-width="formLabelWidth">-->
  <!--          <el-input v-model="storeBankData.city_id" autocomplete="off"></el-input>-->
  <!--        </el-form-item>-->

          <el-form-item label="所属省份和城市" :label-width="formLabelWidth">
            <el-cascader placeholder="试试搜索：广东"
                         :options="provinceAndCityList"
                         :props="{ value: 'value', label: 'label'}"
                         @change="handleChangeCity"
                         filterable>
            </el-cascader>
          </el-form-item>
        </template>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button style="margin-top: 12px;" @click="next">下一步</el-button>
        <el-button @click="cancelDialog">取 消</el-button>
        <el-button type="primary" @click="submitStoreBank('storeBankData')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import store from '@/store'
  import {edit, } from '@/api/thk/cms/bindStoreBank'
  import {list as getBranchList} from '@/api/thk/cms/bankBranch'
  import {dateFormat} from '@/utils/dateFormat'


  export default {
    name: 'editStoreBank',

    /**
     customer_store_identification_id                           商家绑定银行数据id
     store_id                                                   所属店铺id
     type                                                       认证类型；0个人，1企业
     organization_name                                          机构名称
     company_name                                               公司名称
     business_licences                                          营业执照照片
     unified_social_credit_code                                 统一社会信用代码
     province_id                                                省份
     city_id                                                    城市
     address                                                    详细地址
     name_of_cardholder                                         持卡人姓名/法人姓名
     id_of_cardholder                                           持卡人身份证号/法人身份证号
     account_id_start_date                                      身份证有效期开始日期
     account_id_end_date                                        身份证有效期结束日期
     front_of_account_image                                     身份证反面
     back_of_account_image                                      身份证反面
     pay_to                                                     打款到0个人账号，1公司公账
     account_name                                               开户名称
     account_number                                             银行卡卡号
     bank_id                                                    开户行id
     branch_bank_id                                             开户行支行id
     status                                                     0待审核，1成功，2失败
     date_added                                                 添加时间 (不传)
     */
    data() {
      return {
        showEditDialog: false,
        formLabelWidth: '130px',
        active: 1,

        storeBankData: {
          customer_store_identification_id: '',
          store_id: '',
          type: '',
          organization_name: '',
          business_licences: '',
          unified_social_credit_code: '',
          province_id: '',
          city_id: '',
          address: '',
          name_of_cardholder: '',
          id_of_cardholder: '',
          account_id_start_date: '',
          account_id_end_date: '',
          front_of_account_image: '',
          back_of_account_image: '',
          pay_to: '',
          account_name: '',
          account_number: '',
          bank_id: '',
          branch_bank_id: '',
          status: '',
        },

        bankData: [],
        branchData: [],
        storeList: [],
        provinceAndCityList: [],

        rules: {
          // 主行名字必须
          number:[
            { required: true, message: '请输入支行名称', trigger: 'blur' },
          ],
        }
      }
    },


    methods: {
      // 判断是否点击了提交
      submitStoreBank(storeBankData){
        this.$refs[storeBankData].validate((valid) => {
          if (valid) {
            // 设置修改的时间
            // this.storeBankData.date_modified = dateFormat("YYYY-mm-dd HH:MM:SS", new Date())
            console.log('====== edit BankStore ======')
            console.log(this.storeBankData)
            edit(store.getters.token,this.storeBankData).then(result => {
              // 修改成功
              this.showEditDialog = !this.showEditDialog
              this.$message.success('修改成功!')
              this.$parent.getStoreBankData()
            }).catch(error => {
              console.log(error)
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });

      },

      showEditStoreBankDialog(row, bankData, storeList, provinceAndCityList){
        this.storeBankData.customer_store_identification_id = row.customer_store_identification_id
        this.storeBankData.store_id = row.store_id
        this.storeBankData.type  = row.type
        this.storeBankData.organization_name  = row.organization_name
        this.storeBankData.company_name  = row.company_name
        this.storeBankData.business_licences  = row.business_licences
        this.storeBankData.unified_social_credit_code  = row.unified_social_credit_code
        this.storeBankData.province_id  = row.province_id
        this.storeBankData.city_id  = row.city_id
        this.storeBankData.country_id = row.country_id
        this.storeBankData.address  = row.address
        this.storeBankData.name_of_cardholder  = row.name_of_cardholder
        this.storeBankData.pay_to  = row.pay_to
        this.storeBankData.account_name = row.account_name
        this.storeBankData.account_number  = row.account_number
        this.storeBankData.bank_id  = row.bank_id
        this.storeBankData.branch_bank_id  = row.branch_bank_id
        this.storeBankData.status  = row.status
        this.storeList = storeList
        this.bankData = bankData
        this.provinceAndCityList = provinceAndCityList
        // 修改label属性
        this.changeCityData()
        this.showEditDialog = !this.showEditDialog
        // 显示的时候获取到所有的branch数据
        this.getBranchList(this.storeBankData.bank_id)
      },

      cancelDialog(){
        this.showEditDialog = !this.showEditDialog
      },

      getBranchList(bankid){
        getBranchList(store.getters.token, {bankid}).then(res => {
          this.branchData = res.data.list
          console.log(res)
        })
      },

      // handleChangeBank(value){
      //   if(value){
      //     this.storeBankData.bank_id = value[0]
      //     this.storeBankData.branch_bank_id = value[1]
      //
      //   }
      // },

      handleChangeCity(value){
        if(value){
          this.storeData.province_id = value[0]
          this.storeData.city_id = value[1]
          this.storeData.country_id = value[2]
        }
      },


      next() {
        if (this.active++ > 1) this.active = 1;
      },

      // 转换省份数据
      changeCityData(){
        console.log("changeCityList",this.provinceAndCityList)
        let data = {data: this.provinceAndCityList}
        let str = JSON.stringify(data).replace(/province_id/g,'value')
        str = str.replace(/province/g,'label')
        str = str.replace(/city_id/g,'value')
        str = str.replace(/city/g,'label')
        str = str.replace(/country_id/g,'value')
        str = str.replace(/country/g,'label')
        data = JSON.parse(str)
        this.provinceAndCityList = data.data
      },
    },
    watch: {
      "storeBankData.bank_id":{
        handler: function () {
          this.getBranchList(this.storeBankData.bank_id)
        }
      }
    }
  }
</script>

<style scoped>

</style>
